<template>
	<view>
		<view style="background: #007AFF;height: 400rpx;"></view>
		<view class="postfix">
			<view class="row-css" style="text-align: center;padding: 40rpx;justify-content: center;align-items: center;" @click="showup()">
				金额(元)
				<image style="width: 40rpx;height: 30rpx;" mode="aspectFill" :src="isshow == true ? '../../static/icon_eye.png' : '../../static/icon_eye_in.png'" />
			</view>
			<view style="text-align: center;font-size: 60rpx;margin-bottom: 60rpx;">
				<text v-if="isshow">{{ balance }}</text>
				<text v-else>****</text>
			</view>
			<view class="row-css" style="width: 100%;margin-top: 80rpx;">
				<button
					class="mini-btn"
					style="color: #007AFF;border: 1rpx solid #007AFF; margin-right: 20rpx;"
					type="primary"
					plain="true"
					size="default"
					@click="ontrandetails()"
				>
					明细
				</button>
				<button class="mini-btn" style="background: #007AFF;" type="primary" size="default" @click="onwithdraw()">提现</button>
			</view>
			<view style="text-align: center;margin-top: 40rpx;color: #007AFF;" @click="onbanklist">管理我的银行卡</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isshow: false,
			balance: ''
		};
	},
	onShow() {
		this.showup()
	},
	methods: {
		showup() {
			if (!this.isshow) {
				this.wxRequest({
					url: `${this.API}/mini/jzb/queryBalance`,
					method: 'POST',
					title: '余额查询中...',
					success: res => {
						this.isshow = !this.isshow;
						let num = (res.data.data.availAmount - res.data.data.payFreeze).toFixed(2)
						console.log(num)
						this.balance = num > 0 ? num : 0
					}
				});
			} else {
				this.isshow = !this.isshow;
			}
		},
		onwithdraw() {
			let datapurse = {
				category: false,
				// payId: this.payId,
				isshow: this.isshow,
				balance: this.balance
			};
			uni.navigateTo({
				url: '../personal/withdraw?datapurse=' + JSON.stringify(datapurse)
			});
		},
		ontrandetails() {
			uni.navigateTo({
				url: '../personal/transactiondetails'
			});
		},
		onbanklist() {
			uni.navigateTo({
				url: '../personal/bankcardlist'
			});
		}
	}
};
</script>

<style>
page {
	/* background: #ffffff; */
	font-size: 30rpx;
}

.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.postfix {
	position: fixed;
	background: #ffffff;
	border-radius: 10rpx;
	left: 80rpx;
	right: 80rpx;
	top: 120rpx;
	height: 400rpx;
}
.mini-btn {
	width: 100%;
	background: #e04b28;
	font-size: 28rpx;
	padding: 10rpx 0;
	margin: 0 20rpx;
}
</style>
